<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>{% block title %}basepage{% endblock %}</title>
		<link REL="SHORTCUT ICON" HREF="/site-media/favicon/favicon.ico">  
		<!-- the above favicon is property of the Regents of the University of California -->
		<link href="/site-media/bootstrap/bootstrap.min.css" rel="stylesheet">
		<link href="/site-media/jquery/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="/site-media/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="/site-media/jquery/jquery-ui.min.js"></script>
		<script type="text/javascript" src="/site-media/bootstrap/bootstrap-twipsy.js"></script>
		<script type="text/javascript" src="/site-media/bootstrap/bootstrap-popover.js"></script>
		<script type="text/javascript" src="/site-media/bootstrap/bootstrap-alerts.js"></script>
		<script type="text/javascript" src="/site-media/bootstrap/bootstrap-dropdown.js"></script>
		<script type="text/javascript" src="/site-media/jquery-qrcode/jquery.qrcode.min.js"></script>

		{% block extra_scriptsCSS_imports %} {% endblock %}

		<!-- HTML5 shim, for IE6-8 support of HTML elements -->
   		<!--[if lt IE 9]>
      		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    	<![endif]-->

		<style type="text/css">
      		html, body {
        		background-image:url('/site-media/images/bg-stripe4.png');
				background-repeat:vertical;
				background-attachment:fixed;
				background-position:center; 
				height: auto;
      		}
      		body {
        		padding-top: 40px;  adjust body for topbar */
      		}

			/* The white background content wrapper */
      		.content {
        		background-color: #fff;
        		padding: 20px;
        		margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        		-webkit-border-radius: 0 0 6px 6px;
           			-moz-border-radius: 0 0 6px 6px;
                		border-radius: 0 0 6px 6px;
        		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           			-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                		box-shadow: 0 1px 2px rgba(0,0,0,.15);
      		}

      		/* Page header tweaks */
      		.page-header {
        		background-color: #f5f5f5;
        		padding: 20px 20px 10px;
        		margin: -20px -20px 20px;
				padding-bottom:5px;
      		}


			#footerSlideContainer {
	position: fixed;
	bottom:0;
	width: 100%;
}
#footerSlideButton {
	background: url(/site-media/images/sliderButton.png) top left no-repeat transparent;
	position: absolute;
	top: -66px;
	left: 50%;
	margin-left: 410px;
	width:100px;
	height:66px;
	border: none;
	cursor: pointer;
}
#footerSlideContent {
	width: 100%;
	height: 0px;
	background: rgba(255, 255, 255, 0.85);
	color: #000000;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
	padding: 15px 10px 25px 25px;
}

			{% block extra_css_inline %} {% endblock %}

   			footer {
				
				margin-top:-5px;

			}
			.popover .content {
				margin: 0;
			}

.menu-dropdown, .dropdown-menu {
	left:0px;
}
		</style>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28940861-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

	</head>

	<body>
	
<script type="text/javascript">

	{% block extra_scripts_inline %}
	{% endblock %}


// Use 'jQuery(function($) {' for inside WordPress blogs (without quotes)
$(function() {
	var open = false;
	$('#footerSlideButton').click(function() {
		if(open === false) {
			$('#footerSlideContent').animate({ height: '300px' });
			$(this).css('backgroundPosition', 'bottom left');
			open = true;
		} else {
			$('#footerSlideContent').animate({ height: '0px' });
			$(this).css('backgroundPosition', 'top left');
			open = false;
		}
	});
});



function urlSearch(inp) {
	window.open("/search/" + inp.value);
}

</script>
	<div class="topbar-wrapper" style="z-index: 5;">
	<div class="topbar" data-dropdown="dropdown">
    	<div class="fill">
    		<div class="container" id="theTop">
    			<a class="brand" href="/" style="margin-top:2px;"><img src="/site-media/images/cal-logo.png" style="position:absolute;top:1px;" alt="cal logo" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Berkeley Campus Energy Portal</a>
				<ul class="nav">
					<li {% block menu_1 %}{% endblock %}><a href="/map/">Map</a></li>
					<li {% block menu_2 %}{% endblock %}><a href="/buildlist/">Buildings</a></li>
				<!--	<li ><a href="/search/">Advanced Search</a></li> -->
					<li class="dropdown">
						<a href="/compare/" class="dropdown-toggle">Compare</a>
						<ul class="dropdown-menu">
               				 <li {% block menu_4 %}{% endblock %}><a href="/compare/">All Buildings</a></li>
							 <li {% block menu_6 %}{% endblock %}> <a href="/versus/">Versus</a></li>
             			</ul>
					</li>
					<li {% block menu_5 %}{% endblock %}><a href="/campus/">Total Campus</a></li>
				</ul>
				<form action="/search/" method="get" class="pull-right">
					<input id="searchbox" class="input-medium" type="text" placeholder="Search Buildings" name="name">
					<button class="btn" type="submit">Go</button>            
				</form>
				<ul class="nav secondary-nav">

			<li class="dropdown">
              <a href="#" class="dropdown-toggle"></a>
              <ul class="dropdown-menu">
                <li {% block menu_3 %}{% endblock %}><a href="/search/">Advanced Search</a></li>
              </ul>
            </li>

				</ul>
			</div>
		</div>
	</div>
	</div>


	<div class="container">
		<div class="content">
			<div class="page-header">
				<h1>{% block header_title %}{% endblock %}<small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% block header_subtitle %}{% endblock %}</small></h1>
			</div>


		{% block content_inside %}
		{% endblock %}
		</div>
		<footer>
		
		<span style="float:left"><a href="http://local.cs.berkeley.edu" target="_new" ><img src="/site-media/images/LoCal.png" alt="LoCal" /></a></span>

        	<span><p> &nbsp; &nbsp;<span id="validateHTML5"><a href="http://validator.w3.org/check?uri={{ ROOT_URL }}" style="color:#000000;">Valid HTML5</a></span> | <a href="#" onclick="dispandscroll('#DataFrom');" style="color:#000000;">Energy and Building Data</a>
			  | License: <a href="http://www.opensource.org/licenses/bsd-license.php" style="color:#000000;">New BSD</a> | <a href="#" onclick="dispandscroll('#BuiltWith');" style="color:#000000;">Built With</a> | Built By: <a href="http://sagark.org" style="color:#000000;">sagark</a> <br>&nbsp;&nbsp;&nbsp;<a href="http://local.cs.berkeley.edu" style="color:#000000;">local.cs.berkeley.edu</a> |  Source: <a href="http://code.google.com/p/campenport" style="color:#000000;">The campenport Project on googlecode</a> | <a href="/api/" style="color:#000000;">API</a>
</p>		</span>
		  <div id="BuiltWith" class="alert-message info">
            <a class="close" href="#" onclick="$('#BuiltWith').hide();">&times;</a>
            <h4 class="alert-heading">Built With:</h4>
            <p><a href="http://jquery.com" style="color:#000000;">jQuery</a> | <a href="http://twitter.github.com/bootstrap" style="color:#000000;">bootstrap</a> | <a href="http://code.google.com/p/flot/" style="color:#000000;">flot</a> | <a href="http://www.doogal.co.uk/zoomable.php" style="color:#000000;">zoomable</a> | <a href="https://github.com/brandonaaron/jquery-mousewheel/" style="color:#000000;">jquery-mousewheel</a> | <a href="http://www.ama3.com/anytime/" style="color:#000000;">Any+Time</a> | <a href="http://www.dariancabot.com/projects-2/jgauge/" style="color:#000000;">jGauge</a> | <a href="http://code.google.com/p/pseudosavant/" style="color:#000000;">psMathStats</a> | <a href="http://jeromeetienne.github.com/jquery-qrcode/"  style="color:#000000;">qrcode</a> | <a href="http://tydlinka.deviantart.com/art/Set-of-social-icons-no-2-110250447"  style="color:#000000;">social icons</a></p>
          </div>
		<div id="DataFrom" class="alert-message info">
            <a class="close" href="#" onclick="$('#DataFrom').hide();">&times;</a>
            <h4 class="alert-heading">Energy and Building Data Sources</h4>
            <p>Energy Data: <a href="http://new.openbms.org" style="color:#000000;">new.openbms.org</a> | Building Data: <a href="http://berkeley.edu/map/3dmap/3dmap.shtml" style="color:#000000;">Berkeley Interactive Campus Map</a> | <a href="http://dashboard.berkeley.edu" style="color:#000000;">dashboard.berkeley.edu</a>
</p>
          </div>


</footer>
	</div>
<!-- the following adapted from http://return-true.com/2010/04/jquery-pop-up-footer-version-2/ --> 
<div id="footerSlideContainer">
	<div id="footerSlideButton"></div>
	<div id="footerSlideContent">
		<div id="footerSlideText" style="text-align:center;"><div id="botTextWrap" style="text-align:left;width:960px;margin:0px auto;">
			<h3>Have an Energy Conservation Idea? See Energy Waste Happening?</h3>
			<p>We'd love to hear your ideas about saving energy!</p>
			<p>Contact Us Anonymously by <a href="http://berkeley.openbms.org/contact/in/{{ A_SHORT_NAME }}">Clicking here</a> or by scanning the QR code with your phone.</p></div>
		</div><div id="botwrap" style="text-align:center;">
		<span id="qrcode" style="text-align:center;"></span>
		<span id="shares" style="font-size:200%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Share berkeley.openbms:<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fberkeley.openbms.org" target="_blank"><img src="/site-media/images/icons/facebook.png" /></a><a href="https://twitter.com/share" target="_blank"><img src="/site-media/images/icons/twitter.png" /></a><a href="http://digg.com/submit?url=http%3A//berkeley.openbms.org" target="_blank"><img src="/site-media/images/icons/digg.png" /></a><a href="http://www.reddit.com/submit?url=http%3A//berkeley.openbms.org" target="_blank"><img src="/site-media/images/icons/reddit.png" /></a></span>
		</div>
	</div>
</div>

          


{% block random_extras %}
{% endblock %}




<script type="text/javascript">
$("#BuiltWith").hide();
$("#DataFrom").hide();
val = document.getElementById('validateHTML5');
val.innerHTML = "<a href=\"http://validator.w3.org/check?uri=" + document.location.href + "\" target=\"_blank\" style=\"color:#000000;\">Valid HTML5</a>";

$('#qrcode').qrcode({width: 128,height: 128,text: "http://berkeley.openbms.org/contact/in/{% block extend_contact_url %}{% endblock %}"});

function dispandscroll(element){
	$(element).show();
	$('html,body').animate({scrollTop: $(element).offset().top}, 2000);
}

$(function () {
              $("a[rel=popover]")
                .popover({
                  offset: 10,
				  html: true,
				  placement: 'above',
				  delayOut: 2000,
                })
                .click(function(e) {
                  e.preventDefault()
                })
            })
$(function() {
		var availableTags = [
			{% for building in buildings|dictsort:"longname" %}
			"{{ building.longname }}",
			{% endfor %}
		];
		var getURLbuild = {
			{% for building in buildings|dictsort:"longname" %}
			"{{ building.longname }}": '/buildings/{{ building.shortname }}/',
			{% endfor %}
		};
		$( "#searchbox" ).autocomplete({
			source: availableTags,
			select: function(event, ui) { location.href=getURLbuild[ui.item['label']]; }
		});
	});

</script>
	</body>
</html>

